<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <!-- 必须的 meta 标签 -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>GameHub商城</title>
      <!-- Bootstrap 的 CSS 文件 -->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/font/stylesheet.css">
      <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">

      <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
      <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
      <script>
        $(function () {
          /* var currentPage = GetRequest(searchURL)['currentPage'] */
          document.onmouseup = function (event)   //鼠标弹起事件
          {
            var target = event.target;
            var div = document.getElementById("collapseFive");
            if (!div.contains(target)) div.setAttribute("class", div.getAttribute("class").replaceAll("show", ""));
          }
          $.get("${pageContext.request.contextPath}/games/findByPage?currentPage=1" , "", function (data) {
            var str = "";
            var list = data.list
            var totalPage = data.pages
            for (var i in list) {
              if (i % 5 == 0) str += '<div class="row pl-0 pr-4">'
              str += '<div class="card bg-transparent col-lg" style="width: 18rem;">'
                + '<a class="" href="${pageContext.request.contextPath}/game/findDetailById?gid=' + list[i].id + '">'
                + '<img src="' + list[i].game_src + '" class="card-img-top rounded" alt="...">'
                + '</a>'
                + '<div class="card-body pl-0">'
                + '<h5 class="card-title text-white">' + list[i].game_name + '</h5>'
                + '<div class="d-flex flex-col"></div>'
                + '<div class="d-flex flex-col">'
              if (list[i].game_discount != 'no discount') str += '<a href="#" class="btn btn-primary py-0 px-2">' + list[i].game_discount + '%</a>'
              str += '<div class="d-flex flex-col">'
              if (list[i].game_discount != 'no discount') str += '<div class="my-auto mx-1 discount">￥' + list[i].game_original_price + '</div>'
              str += '<div class="my-auto text-white">￥' + list[i].game_final_price + '</div>'
                + '</div>'
                + '</div>'
                + '</div>'
                + '</div>'
              if (i % 5 == 4) str += '</div>'
            }
            $("#items-game").html(str)
            var strpage = "";
            for (i = 1; i <= totalPage; i++) {
              strpage += '<li class="page-item"><a onclick="changePage(this)">' + i + '</a></li>'
            }
            $("#pageindex").html(strpage)
          }, "json")
          //动态更新类型
          $.get("${pageContext.request.contextPath}/type/getTypes", "", function (data) {
            var str = "";
            for (var i in data) {
              str += '<button type="button" class="btn rounded text-left d-flex justify-content-between align-items-center" onclick="select(this)">' + data[i].name
                + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">'
                + '<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>'
                + '</svg>'
                + '</button>'
            }
            $("#type-list").append(str)

          }, "json")
          //动态更新特性
          $.get("${pageContext.request.contextPath}/feature/getFeatures", "", function (data) {
            var str = "";
            for (var i in data) {
              str += '<button  type="button" class="btn rounded text-left d-flex justify-content-between align-items-center" onclick="select(this)">' + data[i].name
                + ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">'
                + '<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>'
                + '</svg>'
                + '</button>'
            }
            $("#feature-list").append(str)

          }, "json")
			
        })
        function changePage(obj){
        	var $currentpage = $(obj).text()
        	$.get("${pageContext.request.contextPath}/games/findByPage?currentPage="+$currentpage, "", function (data) {
                var str = "";
                var list = data.list
                var totalPage = data.pages
                for (var i in list) {
                  if (i % 5 == 0) str += '<div class="row pl-0 pr-4">'
                  str += '<div class="card bg-transparent col-lg" style="width: 18rem;">'
                    + '<a class="" href="${pageContext.request.contextPath}/game/findDetailById?gid=' + list[i].id + '">'
                    + '<img src="' + list[i].game_src + '" class="card-img-top rounded" alt="...">'
                    + '</a>'
                    + '<div class="card-body pl-0">'
                    + '<h5 class="card-title text-white">' + list[i].game_name + '</h5>'
                    + '<div class="d-flex flex-col"></div>'
                    + '<div class="d-flex flex-col">'
                  if (list[i].game_discount != 'no discount') str += '<a href="#" class="btn btn-primary py-0 px-2">' + list[i].game_discount + '%</a>'
                  str += '<div class="d-flex flex-col">'
                  if (list[i].game_discount != 'no discount') str += '<div class="my-auto mx-1 discount">￥' + list[i].game_original_price + '</div>'
                  str += '<div class="my-auto text-white">￥' + list[i].game_final_price + '</div>'
                    + '</div>'
                    + '</div>'
                    + '</div>'
                    + '</div>'
                  if (i % 5 == 4) str += '</div>'
                }
                $("#items-game").html(str)
              }, "json")
        }
        function select(obj) {
          var attr = obj.getAttribute("class");
          if (attr.indexOf("active") >= 0) {
            obj.setAttribute("class", attr.replaceAll("active", ""));
          } if (attr.indexOf("sort") >= 0) {
            var span = obj.parentNode.parentNode.parentNode.getElementsByTagName("span")[0];
            var div = obj.parentNode.parentNode;
            div.setAttribute("class", div.getAttribute("class").replaceAll("show", ""));
            span.innerHTML = obj.innerHTML;
          } else {

            var other = obj.parentNode.getElementsByClassName("active")[0];
            if (other && obj.parentNode.getAttribute("class").indexOf("game-price") >= 0) other.setAttribute("class", attr.replaceAll("active", ""));
            obj.setAttribute("class", attr + " active");
          }
        }
        function hide(obj) {
          document.onclick = function (event) {
            alert(event);
          }
          var div = document.getElementById("collapseFive");
          div.setAttribute("class", div.getAttribute("class").replaceAll("show", ""));
        }
      </script>
      <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
      <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sortpage.min.css">
    </head>

    <body>
      <!-- 头部导航标签 -->
      <nav class="navbar navbar-expand-lg ">
        <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="" height="40px"
            class="d-inline-block align-top"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
          aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">商城 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">榜单</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">帮助</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">常见问题</a>
            </li>
          </ul>
          
          <c:if test="${not empty user}">
            <a href="${pageContext.request.contextPath}/user/exit" class="navbar-text">退出账户</a>
          </c:if>
          
          <c:if test="${empty user}">
          	<a href="${pageContext.request.contextPath}/pages/regest.jsp" class="navbar-text">注册</a>
            <a href="${pageContext.request.contextPath}/pages/login.jsp" class="navbar-text">登录</a>
          </c:if>
        </div>
      </nav>
      <!-- 搜索和商城导航栏 -->
      <div class="container mx-auto px-0 mb-2 sticky-top" id="banner-search">
        <div class="row px-0">
          <div class="col-md-1"></div>
          <nav class="col-lg-10 col-md-10 navbar navbar-expand-lg px-0" id="test">
            <a class="navbar-brand" href="#">
              <div class="input-group">
                <div class="input-group-prepend">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-search" viewBox="0 0 16 16">
                    <path
                      d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                  </svg>
                  <!-- <span class="input-group-text" id="basic-addon1">@</span> -->
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username"
                  aria-describedby="basic-addon1">
              </div>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
              aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">探索 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">浏览</a>
                </li>
              </ul>
              <c:if test="${not empty user}">
                <span class="navbar-text">欢迎${user.username}</span>
                <a href="${pageContext.request.contextPath}/pages/personal.jsp" class="navbar-text">个人中心</a>
                <a class="navbar-text">愿望清单</a>
                <a href="${pageContext.request.contextPath}/cart/getUserCart" class="navbar-text">购物车<span class="badge badge-light ml-1">4</span></a>
              </c:if>
            </div>
          </nav>
          <div class="col-md-1"></div>
        </div>
      </div>
      <main class="container mx-auto px-0 ">
        <div class="row px-0 ">
          <div class="col-1"></div>
          <!-- 页面主体 -->
          <div class="col-10">

            <!-- 选择分类 -->
            <div class="row banner-type mt-3">
              <div class="row col-12 m-0 p-0 mb-3">
                <div class="text-white my-auto subtitle">受欢迎的类型</div>
                <div class="col text-right pr-0">
                  <button class="btn btn-danger rounded-circle bg-dark p-0 m-0 mr-2 border-0"
                    data-target="#carouselGameTypes" style="width: 30px;height: 30px;" data-slide="next">
                    <svg class=" text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                      fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                      <path fill-rule="evenodd"
                        d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                    </svg>
                  </button>
                  <button class="btn btn-danger rounded-circle bg-dark p-0 m-0 border-0"
                    style="width: 30px;height: 30px;" data-target="#carouselGameTypes" data-slide="prev">
                    <svg class=" text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                      fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16"
                      style="transform: rotate(180deg);">
                      <path fill-rule="evenodd"
                        d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                    </svg>
                  </button>

                </div>
              </div>
              <div id="carouselGameTypes" class="carousel slide row col-12 p-0 m-0" data-ride="carousel"
                data-interval="false">
                <div class="carousel-inner">
                  <div class="carousel-item  active">
                    <div class="row ml-0">
                      <div class="row">
                        <div class="col">
                        </div>
                      </div>
                      <a href="${pageContext.request.contextPath}/pages/popular.jsp?tid=29&currentPage=1" class="card col mr-2 rounded shadow-lg" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">动作</h5>
                        </div>
                      </a>
                      <a href="${pageContext.request.contextPath}/pages/popular.jsp?tid=20&currentPage=1"
                        class="card col mr-2 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">动作角色扮演游戏</h5>
                        </div>
                      </a>
                      <a href="${pageContext.request.contextPath}/pages/popular.jsp?tid=8&currentPage=1" class="card col mr-2 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">休闲</h5>
                        </div>
                      </a>
                      <a href="${pageContext.request.contextPath}/pages/popular.jsp?tid=7&currentPage=1" class="card col mr-2 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">恐怖</h5>
                        </div>
                      </a>
                      <a href="${pageContext.request.contextPath}/pages/popular.jsp?tid=20&currentPage=1" class="card col mr-3 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center">独立制作</h5>
                        </div>
                      </a>

                    </div>
                  </div>
                  <div class="carousel-item">
                    <div class="row ml-0">
                      <div class="row">
                        <div class="col">
                        </div>
                      </div>
                      <a href="${pageContext.request.contextPath}/pages/popular.jsp?tid=6&currentPage=1" class="card col mr-2 rounded shadow-lg" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">动作</h5>
                        </div>
                      </a>
                      <div class="card col mr-2 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">1</h5>
                        </div>
                      </div>
                      <div class="card col mr-2 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">2</h5>
                        </div>
                      </div>
                      <div class="card col mr-2 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center subtitle">3</h5>
                        </div>
                      </div>
                      <div class="card col mr-3 rounded" style="width: 18rem;">
                        <div class="p-4 row m-0">
                          <div class="row p-0 position-relative">
                            <div class="col p-0 m-0">
                              <img
                                src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                class="card-img-top rounded" alt="...">
                            </div>
                            <div class="col p-0 m-0">
                              <img src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                                class="card-img-top rounded" alt="">
                            </div>
                            <div class="col p-0 m-0 position-absolute h-100">
                              <div class="col w-50 mx-auto p-0">
                                <img
                                  src="../img/EGS_RanchSimulator_ToxicDog_S2_1200x1600-2dba2a702616b164ae27196736256870_1200x1600-2dba2a702616b164ae27196736256870.jfif"
                                  class="card-img-top rounded img-fluid" alt="">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="card-body">
                          <h5 class="card-title text-white text-center">4</h5>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 商品详情 -->
            <div class="row banner-items mt-5">
              <div class="col-lg-10 p-0 position-relative">
                <div class="mb-3">
                  <div class="dropdown">
                    <div class="panel d-flex panel-default" id="sortway">
                      <div class="position-relative" onblur="hide(this)">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <button type="button"
                              class="btn d-flex justify-content-between align-items-center text-left collapsed"
                              href="#collapseFive" data-toggle="collapse">
                              <label for="" class="m-0 mr-2">排序方式 ：</label>
                              <span>最新推出</span>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                <path
                                  d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                              </svg>
                            </button>
                          </h4>
                        </div>
                        <div class="panel-collapse collapse btn-toolbar position-absolute rounded" role="toolbar"
                          aria-label="Toolbar with button groups" id="collapseFive">
                          <div class="game-price btn-group-vertical mx-0 w-100" role="group" aria-label="First group">
                            <button type="button"
                              class="btn rounded text-left d-flex justify-content-between align-items-center sort"
                              onclick="select(this)">相关性
                            </button>
                            <button type="button"
                              class="btn rounded text-left d-flex justify-content-between align-items-center sort"
                              onclick="select(this)">最新推出
                            </button>
                            <button type="button"
                              class="btn rounded text-left d-flex justify-content-between align-items-center sort"
                              onclick="select(this)">字母排序
                            </button>
                            <button type="button"
                              class="btn rounded text-left d-flex justify-content-between align-items-center sort"
                              onclick="select(this)">价格：由低到高
                            </button>
                            <button type="button"
                              class="btn rounded text-left d-flex justify-content-between align-items-center sort"
                              onclick="select(this)">价格：由高到低
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="items-game">

                  </div>
                  <div class="row banner-nav mt-3 w-100 d-flex justify-content-center">
                    <nav aria-label="Page navigation example">
                      <ul class="pagination" id="pageindex">

                      </ul>
                    </nav>
                  </div>
                </div>
              </div>

              <div class="col-lg-2">
                <div class="row position-relative" id="chooser">
                  <div class="col">
                    <div class="row">
                      <div class="col title">筛选器</div>
                    </div>
                    <!-- 折叠筛选框 -->
                    <div class="row">
                      <div class="btn-toolbar col p-0" role="toolbar" aria-label="Toolbar with button groups"
                        id="aside-chooser">
                        <div class="panel-group btn-group-vertical w-100" role="group" aria-label="First group">
                          <div class="panel panel-default divider align-self-stretch">

                          </div>
                          <div class="panel panel-default w-100">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a type="button"
                                  class="btn w-100 d-flex justify-content-between align-items-center  text-left collapsed"
                                  href="#collapseOne" data-toggle="collapse">
                                  价格
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                    <path
                                      d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                                  </svg>
                                </a>
                              </h4>
                            </div>
                            <div class="panel-collapse collapse btn-toolbar w-100" role="toolbar"
                              aria-label="Toolbar with button groups" id="collapseOne">
                              <div class="game-price btn-group-vertical mx-0 w-100" role="group"
                                aria-label="First group">
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">￥70以下
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">￥140以下
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">￥210以下
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">￥90及以上
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">折扣
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default divider align-self-stretch">

                          </div>
                          <div class="panel panel-default w-100">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a type="button"
                                  class="btn w-100 d-flex justify-content-between align-items-center  text-left collapsed"
                                  href="#collapseTwo" data-toggle="collapse">
                                  游戏类型
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                    <path
                                      d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                                  </svg>
                                </a>
                              </h4>
                            </div>
                            <div class="panel-collapse collapse btn-toolbar w-100" role="toolbar"
                              aria-label="Toolbar with button groups" id="collapseTwo">
                              <div id="type-list" class="game-type btn-group-vertical mx-0 w-100" role="group"
                                aria-label="First group">

                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default divider align-self-stretch">

                          </div>
                          <div class="panel panel-default w-100">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a type="button"
                                  class="btn w-100 d-flex justify-content-between align-items-center  text-left collapsed"
                                  href="#collapseThree" data-toggle="collapse">
                                  特色
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                    <path
                                      d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                                  </svg>
                                </a>
                              </h4>
                            </div>
                            <div class="panel-collapse collapse btn-toolbar w-100" role="toolbar"
                              aria-label="Toolbar with button groups" id="collapseThree">
                              <div id="feature-list" class="game-feature btn-group-vertical mx-0 w-100" role="group"
                                aria-label="First group">
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default divider align-self-stretch">

                          </div>
                          <div class="panel panel-default w-100">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a type="button"
                                  class="btn w-100 d-flex justify-content-between align-items-center  text-left collapsed"
                                  href="#collapseFour" data-toggle="collapse">
                                  平台
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                    <path
                                      d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                                  </svg>
                                </a>
                              </h4>
                            </div>
                            <div class="panel-collapse collapse btn-toolbar w-100" role="toolbar"
                              aria-label="Toolbar with button groups" id="collapseFour">
                              <div class="game-platform btn-group-vertical mx-0 w-100" role="group"
                                aria-label="First group">
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">Windows
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                                <button type="button"
                                  class="btn rounded text-left d-flex justify-content-between align-items-center"
                                  onclick="select(this)">Mac OS
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-check" viewBox="0 0 16 16">
                                    <path
                                      d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                  </svg>
                                </button>
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default divider align-self-stretch">

                          </div>
                        </div>

                      </div>


                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-1"></div>
        </div>
      </main>
    </body>

    </html>